<template>
  <div>
    <el-col>

      <el-col>

        通知列表 - 共 {{ listInfos.length }} 条
        <el-button type="primary" size="small" @click="getInfo">刷新</el-button>
        <el-button type="primary" size="small" @click="openListen">通知上报</el-button>
<!--        <span style="background-color: #a52a2a">indeterminate：{{ indeterminateCount }}</span>-->
      </el-col>
      <div>
        <el-table
            :data="listInfos"
            style="width: 100%">
          <el-table-column
              prop="notificationId"
              label="通知事件ID">
            <!--              width="100">-->
          </el-table-column>
          <el-table-column
              prop="objectName"
              label="上报对象">
          </el-table-column>
          <el-table-column
              prop="eventType"
              label="告警类型">
          </el-table-column>
          <el-table-column
              prop="nativeProbableCause"
              label="告警原因">
          </el-table-column>
          <el-table-column
              prop="perceivedSeverity"
              label="告警级别">
          </el-table-column>
          <el-table-column
              prop="emsTime"
              label="接收时间">
          </el-table-column>
          <el-table-column
              prop="additionalInfo"
              label="附加信息">
          </el-table-column>
          <el-table-column label="操作" width="120px">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  style="width: 60px"
                  @click="handleEdit(scope.$index, scope.row)">编辑
              </el-button>
              <el-button
                  size="mini"
                  style="width: 60px"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

    </el-col>


  </div>

</template>

<script>
import axios from "axios";

const ws = new WebSocket("ws://localhost:8888/device/notification");
export default {
  components: {
    // eslint-disable-next-line vue/no-unused-components

  },
  data() {
    return {
      listInfos: [{
        'notificationId': '初始化测试数据',
        'objectName': '未收到上报信息',
        'nativeEMSName': '',
        'nativeProbableCause': '',
        'objectType': '',
        'emsTime': '',
        'neTime': '',
        'isClearable': '',
        'layerRate': '',
        'probableCause': '',
        'probableCauseQualifier': '',
        'perceivedSeverity': '',
        'serviceAffecting': '',
        'affectedTPList': '',
        'additionalText': '',
        'additionalInfo': '',
        'rcaiIndicator': '',
        'eventType': ''
      }
      ],
      rules: {
        name: [
          {required: true, message: '请输入网元名称', trigger: 'blur'},
          {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
        ]
      }
    };
  },
  computed: {
    // 不确定的
    // int indeterminate = 0;
    // int critical = 0;
    // int major = 0;
    // int minor = 0;
    // int warning = 0;
    // int cleared = 0;
    indeterminateCount: function () {
      return this.listInfos.length;
    },
    //   criticalCount() {
    //
    //   },
    //   majorCount(){
    //
    //   },
    //   minorCount(){
    //
    //   },
    //   warningCount(){
    //
    //   },
    //   clearedCount(){
    //
    //   }
    //
  },

  watch: {
    indeterminate: {
      // handler是函数，当isHot发生改变时调用
      immediate: true, //初始化时让handler调用
      handler(newValue, odlValue) {
        console.log('indeterminate修改了:', newValue, odlValue)
      }
    }
  },

  beforeMount() {

  },

  mounted() {
    ws.addEventListener('open', this.handleWsOpen.bind(this), false);
    ws.addEventListener('close', this.handleWsClose.this, false);
    ws.addEventListener('error', this.handleWsError.this, false);
    ws.addEventListener('message', this.handleWsMessage.bind(this), false);
  },

  methods: {
    connectWebsocket() {
      let websocket;
      if (typeof WebSocket === "undefined") {
        console.log("您的浏览器不支持WebSocket");
        return;
      } else {
        let protocol = "ws";
        let url = "";
        if (window.localtion.protocol == "https:") {
          protocol = "wss";
        }
        // `${protocol}://window.location.host/echo`;
        url = `${protocol}://localhost:9998/echo`;

        // 打开一个websocket
        websocket = new WebSocket(url);
        // 建立连接
        websocket.onopen = () => {
          // 发送数据
          websocket.send("发送数据");
          console.log("websocket发送数据中");
        };
        // 客户端接收服务端返回的数据
        websocket.onmessage = evt => {
          console.log("websocket返回的数据：", evt);
        };
        // 发生错误时
        websocket.onerror = evt => {
          console.log("websocket错误：", evt);
        };
        // 关闭连接
        websocket.onclose = evt => {
          console.log("websocket关闭：", evt);
        };
      }
    },
    getInfo() {
      axios.get('/getAlarm').then(
          response => {
            console.log("请求成功", response.data);
            this.listInfos = response.data;
          },
          error => {
            console.log("失败！", error.message)
          }
      )
    },
    openListen() {
      axios.get('/listen').then(
          response => {
            console.log("请求成功", response.data);
            alert("通知上报已开启");
          },
          error => {
            console.log("失败！", error.message)
          }
      )
    },

    handleWsOpen(e) {
      console.log("websocket open", e);

    },
    handleWsClose(e) {
      console.log("websocket close", e);

    },
    handleWsError(e) {
      console.log("websocket error", e);
    },
    handleWsMessage(e) {
      console.log("接受到的信息：\n" + e.data);
      this.listInfos = JSON.parse(e.data);
    },

  },
  // computed:{
  //   getWsMsg (){
  //     return this.$store.state.webSocketMsg
  //   }
  // },
  // watch:{
  //   getWsMsg:{
  //     handler: function(newVal) {
  //       console.log(newVal)
  //       alert('接收到webSocket推送'+ newVal)
  //     }
  //   }
  // }

}
</script>

<style>
#test {
  /*background: #a3a6aa;*/
  width: 600px;
  height: auto;
}

el-switch {
  padding-left: 5px;
}

.el-table .warning-row {
  background: #d08787;
}

.el-table .success-row {
  background: #59bb22;
}

.el-table--enable-row-hover .el-table__body :hover {

  background-color: #e7e794;

}

.el-table .other-row {
  background: #2d8daa;
}
</style>
